<template>
      <div class="img_box0">
            <a><img :src=ss.avatar alt=""></a>
            <div style="display:inline-block">
            <a><el-link :underline="false" disabled style="cursor: auto;color:black">姓名：{{ss.username}}</el-link></a>
            <a><el-link :underline="false" disabled style="cursor: auto;color:black">昵称：{{ss.nickname}}</el-link></a>
            <br>
            <a><el-link :underline="false" disabled style="cursor: auto;color:black">学校：{{ss.school}}</el-link></a>
            <!-- <a v-if="ss.gender">性别：女</a>
            <a v-if="ss.gender">性别：男</a> -->
            <a><el-link :underline="false" disabled style="cursor: auto;color:black">性别：{{aa}}</el-link></a>
            <br>
            <!-- <a>密码：{{ss.password}}<a>修改</a></a> -->
            <a><el-link :underline="false" disabled style="cursor: auto;color:black">密码：{{ss.password}}</el-link>
            <el-link type="primary" :underline="false" @click="dialogFormVisible=true">修改</el-link></a>
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="旧密码" :label-width="formLabelWidth">
                <el-input v-model="form.oldpassword" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="form.newpassword" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="再次输入密码" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer"><!-- style="float:right"-->
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="changlist">确 定</el-button>
            </div>
            </el-dialog>
            </div>
      </div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    name:'userinfo',
    data() {
      return {
        aa:'',
        form:{
          newpassword: '',
          oldpassword:'',
          price:''
        },
        dialogFormVisible:false,
        formLabelWidth:'100px',
      }
    },
    computed:{
    ...mapState({
        'ss':state=>state.userinfo
    }),
    },
    created(){
      if(this.ss.gender==0){
        this.aa="女"
      }else{
        this.aa="男"
      }
    },
    methods: 
    {
    // toLogin(){
    //   this.$router.push('login')
    // },
    // toStore(){
    //     ulli.style.backgroundColor='pink';
    // },
    // passChange(){
    //   console.log(this.form.name);
    // },
    async changlist(){
      const data = await this.aPut('/user/changePassword',
      {oldPassword:this.form.oldpassword,
      newPassword:this.form.newpassword})
        this.dialogFormVisible = false;
        console.log(data);
        this.$router.replace('/login')
    },
    // info(){
    // }
  }
  }
</script>

<style scoped>
    .img_box0{
        text-align: left;
        margin: 50px;
    }
    .img_box0 a{
      margin: 20px 50px;
    }
    .img_box0 img{
        width: 100px;
        height: 100px;
        border-radius: 100px;
        margin: 10px;
        /* text-align: left; */
         /* margin-bottom: 20px; */
    }
    .box0{
      width: 90%;
      height: 100%;
    }
</style>